"use client";

import React from "react";
import Image from "next/image";
import { useTheme } from "@/context/ThemeProvider";

import { themes } from "@/constants";

import {
	Menubar,
	MenubarContent,
	MenubarItem,
	MenubarMenu,
	MenubarTrigger,
} from "@/components/ui/menubar";

export default function Theme() {
	const { mode, setMode } = useTheme();
	return (
		<Menubar className="border-none">
			<MenubarMenu>
				<MenubarTrigger>
					{mode == "light" ? (
						<Image
							src="/assets/icons/moon.svg"
							width={24}
							height={24}
							alt="moon"
							className="active-theme"
						/>
					) : (
						<Image
							src="/assets/icons/sun.svg"
							width={24}
							height={24}
							alt="sun"
							className="active-theme"
						/>
					)}
				</MenubarTrigger>
				<MenubarContent className="absolute right-[-3rem] mt-3 min-w-[120px] rounded border py-2 dark:border-dark-400 dark:bg-dark-300">
					{themes.map((theme) => (
						<MenubarItem
							key={theme.value}
							onClick={() => {
								setMode(theme.value);
								if (theme.value !== "system") {
									localStorage.theme = theme.value;
								} else {
									localStorage.removeItem("theme");
								}
							}}
							className={`
								${mode === theme.value && "text-primary-500  bg-light-800 dark:bg-dark-400"}
								flex-start gap-1 body-semibold
								`}
						>
							<Image
								src={theme.icon}
								alt={theme.label}
								width={15}
								height={16}
								className={`${mode === theme.value && "active-theme"}`}
							></Image>
							<p>{theme.label}</p>
						</MenubarItem>
					))}
				</MenubarContent>
			</MenubarMenu>
		</Menubar>
	);
}
